<template>
  <div class="content-box" ref="content">
    <div class="header-card">
      <span class="active">我的项目</span>
    </div>
    <div class="main-box">
      <ul class="select-box">
        <li>
          <span class="label w-90">项目名称：</span>
          <el-input
            placeholder="请输入项目名称"
            v-model="project_name"
            @keydown.enter.native="searchByOption"
            clearable
          >
          </el-input>
        </li>
        <li>
          <span class="label w-100">项目节点：</span>
          <el-select
            v-model="schedule_node"
            clearable
            placeholder="请选择项目节点"
            @change="changeOption"
          >
            <el-option
              v-for="item in options_node"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </li>
        <li>
          <span class="label w-80">承接县区：</span>
          <el-select
            v-model="district"
            clearable
            placeholder="请选择承接县区"
            @change="changeOption"
          >
            <el-option
              v-for="item in options_district"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </li>
        <li>
          <span class="label w-80">进展情况：</span>
          <el-select
            v-model="schedule_condition"
            clearable
            placeholder="是否为市重点项目"
            @change="changeOption"
          >
            <el-option
              v-for="item in options_status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </li>
        <li>
          <span class="label">市重点项目情况：</span>
          <el-select
            class="long-140"
            v-model="is_importance"
            clearable
            placeholder="是否为市重点项目"
            @change="changeOption"
          >
            <el-option
              v-for="item in options_is"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </li>

        <li class="btn-group">
          <!-- <span class="btn-s" @click="searchByOption">搜 索</span> -->
          <span class="y-btn btn-s btn-c " @click="clearByOption">返 回</span>
        </li>
        <li>
          <span class="label w-90">项目引进地：</span>
          <el-tooltip
            class="item"
            effect="light"
            :disabled="province.length == 0 || province[0] == ''"
            :content="province.join(' - ')"
            placement="top-start"
          >
            <el-cascader
              v-model="province"
              :options="options_province"
              :props="{
                value: 'value',
                label: 'label',
                checkStrictly: true,
                expandTrigger: 'hover',
              }"
              @change="changeOption"
              placeholder="请选择项目引进地"
              clearable
            ></el-cascader>
          </el-tooltip>
        </li>
        <li>
          <span class="label w-100">项目所属产业：</span>
          <el-select
            v-model="industry"
            clearable
            placeholder="请选择项目所属产业"
            @change="changeOption"
          >
            <el-option
              v-for="item in options_industry"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </li>
        <li>
          <span class="label w-80">项目来源：</span>
          <el-select
            v-model="project_source"
            clearable
            placeholder="请选择项目来源"
            @change="changeOption"
          >
            <el-option
              v-for="item in options_source"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </li>
        <li>
          <span class="label w-80">投资情况：</span>
          <el-select
            v-model="investment_condition"
            clearable
            placeholder="请选择投资情况"
            @change="changeOption"
          >
            <el-option
              v-for="item in options_money"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </li>
        <li>
          <span class="label">报入省招商系统情况：</span>
          <el-select
            class="long-140"
            v-model="is_enter13710"
            clearable
            placeholder="是否报入省招商系统"
            @change="changeOption"
          >
            <el-option
              v-for="item in options_is"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </li>
        <li class="btn-group"></li>
      </ul>
      <div class="group-cz">
        <span class="btn y-btn m-r-30" @click="importInfo">信息导入</span>

        <span class="btn y-btn m-r-30" @click="TemplateDownload">模板下载</span>
        <span class="btn y-btn " @click="batchExport">导 出</span>

        <span class="btn y-btn m-l-30 f-right" @click="showToExamineDialog"
          >批量审核</span
        >
        <!-- <span class="btn r-btn f-right">批量删除</span> -->
      </div>
      <div class="table-el table-box">
        <el-table
          :data="projectList"
          ref="multipleTable"
          tooltip-effect="light"
          border
          stripe
          v-loading="isLoading"
          row-key="id"
          style="width: 100%;"
          :height="425"
          :header-cell-style="{
            textAlign: 'center',
          }"
          :cell-style="{
            textAlign: 'center',
          }"
          @row-click="toArchives"
        >
          <el-table-column label="序号" width="60" fixed>
            <template slot-scope="scope">
              <div>
                {{ (page - 1) * per_page + scope.row.index }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            label="项目名称"
            fixed
            width="240"
          >
            <template slot-scope="scope">
              <div style="cursor:pointer">
                {{ scope.row.project_name }}
              </div>
            </template>
          </el-table-column>

          <el-table-column :show-overflow-tooltip="true" :label="'承接县区'">
            <template slot-scope="scope">
              {{ scope.row.district }}
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" :label="'项目单位'">
            <template slot-scope="scope">
              {{ scope.row.project_unit }}
            </template>
          </el-table-column>
          <el-table-column
            class-name="long-text"
            :show-overflow-tooltip="true"
            :label="'项目' + '\r\n' + '引进省份'"
            width="120"
          >
            <template slot-scope="scope">
              {{ scope.row.province.replace("；", "") }}
            </template>
          </el-table-column>
          <el-table-column
            class-name="long-text"
            width="120"
            :show-overflow-tooltip="true"
            :label="'项目' + '\r\n' + '所属产业'"
          >
            <template slot-scope="scope">
              {{ scope.row.industry }}
            </template>
          </el-table-column>
          <el-table-column
            class-name="long-text"
            width="80"
            :show-overflow-tooltip="true"
            :label="'总投资额' + '\r\n' + '（亿元）'"
          >
            <template slot-scope="scope">
              {{ scope.row.investment_volume }}
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" :label="'建设内容'">
            <template slot-scope="scope">
              {{ scope.row.construction_content }}
            </template>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            width="80"
            :label="'进度节点'"
          >
            <template slot-scope="scope">
              {{
                scope.row.schedule_node == "拟投产" ||
                scope.row.schedule_node == "已投产"
                  ? "已开工"
                  : scope.row.schedule_node
              }}
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" :label="'最新进展'">
            <template slot-scope="scope">
              {{ scope.row.project_schedule }}
            </template>
          </el-table-column>

          <el-table-column
            class-name="long-text"
            width="120"
            :show-overflow-tooltip="true"
            :label="'需要解决' + '\r\n' + '的问题'"
          >
            <template slot-scope="scope">
              {{ scope.row.project_problem }}
            </template>
          </el-table-column>

          <el-table-column
            class-name="long-text"
            width="90"
            :show-overflow-tooltip="true"
            :label="'项目承接地' + '\r\n' + '联系人'"
          >
            <template slot-scope="scope">
              {{ scope.row.district_people }}
            </template>
          </el-table-column>
          <el-table-column
            class-name="long-text"
            width="66"
            :show-overflow-tooltip="true"
            :label="'市重点' + '\r\n' + '项目'"
          >
            <template slot-scope="scope">
              {{ scope.row.is_importance }}
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" :label="'项目来源'">
            <template slot-scope="scope">
              {{ scope.row.project_source }}
            </template>
          </el-table-column>
          <el-table-column
            class-name="long-text"
            width="90"
            :show-overflow-tooltip="true"
            :label="'报入省招商' + '\r\n' + '引资系统'"
          >
            <template slot-scope="scope">
              {{ scope.row.is_enter13710 }}
            </template>
          </el-table-column>

          <!--  :show-overflow-tooltip="true" -->
          <el-table-column label="状态" width="80" fixed="right">
            <template slot-scope="scope">
              <!-- 0 待审核 1 审核通过 2 未通过 -->
              <el-popover
                v-if="scope.row.project_audit_status == 2"
                trigger="hover"
                placement="top"
                class="status-error"
              >
                <span>未通过原因： {{ scope.row.project_audit_message }}</span>
                <div slot="reference" class="name-wrapper">
                  <span class="status-error">未通过</span>
                </div>
              </el-popover>
              <span
                class="status-success"
                v-if="scope.row.project_audit_status == 1"
                >已通过</span
              >
              <span
                class="status-warning"
                v-if="scope.row.project_audit_status == 0"
                >待审核</span
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template slot-scope="scope">
              <div
                style="display:flex;justify-content:space-between;    height: 100%;  align-items: center;"
              >
                <span class="btn-def" @click="editArchives(scope.row.id)"
                  >修改</span
                >
                <span class="btn-def" @click="ToExamineByOne(scope.row.id)"
                  >审核</span
                >
                <span
                  class="btn-def btn-del"
                  @click="delProjectById(scope.row.id)"
                  >删除</span
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-el">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="per_page"
          layout=" prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="数据导入"
      :visible.sync="showImport"
      @close="closeUpload"
      :show-close="false"
      class="import"
    >
      <div class="upload">
        <div class="s-title">附件上传：</div>
        <el-upload
          class="upload-demo files "
          ref="upload"
          action=""
          :limit="1"
          accept=".xlsx"
          :before-upload="beforeUpload"
          :http-request="uploadFile"
          :on-remove="handleRemove"
          :auto-upload="false"
          :file-list="fileList"
          :show-file-list="false"
          :on-change="changeFile"
        >
          <el-button size="small" type="primary">
            <img src="~@img/project/icon-add.png" alt="" />点击上传
          </el-button>
          <div slot="tip" class="el-upload__tip">
            （上传文件的类型 xlsx）
          </div>
        </el-upload>
      </div>
      <div v-for="item of changeFileList" :key="item.name" class="file-list">
        <img
          v-if="
            item.name.split('.')[item.name.split('.').length - 1] == 'xls' ||
              item.name.split('.')[item.name.split('.').length - 1] == 'xlsx'
          "
          src="~@img/upload/icon-excel.png"
          alt=""
        />
        <img
          v-if="item.name.split('.')[item.name.split('.').length - 1] == 'pdf'"
          src="~@img/upload/icon-pdf.png"
          alt=""
        />
        <img
          v-if="item.name.split('.')[item.name.split('.').length - 1] == 'docx'"
          src="~@img/upload/icon-word.png"
          alt=""
        />

        <img src="" alt="" />
        <span class="name">{{ item.name }}</span>
        <span @click="lookFile(item)" class="img111">
          <img src="~@img/upload/icon-eye.png" alt="" />
          <span class="s">预览</span>
        </span>
        <span @click="delFile(item.uid)" class="img222">
          <img src="~@img/upload/icon-delete.png" alt="" />
          <span class="d">删除</span>
        </span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeUpload">
          取 消
        </el-button>
        <el-button type="primary" @click="submitUpload">
          提 交
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      class="not-padding"
      title="模板下载"
      :visible.sync="showTemplate"
      :show-close="false"
    >
      <div>
        <span class="tips">提示信息：是否下载该模板？</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showTemplate = false">
          取 消
        </el-button>
        <el-button type="primary" @click="DownloadTemplate">
          确 认
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      class="not-padding"
      title="导出提示"
      :visible.sync="showExport"
      :show-close="false"
    >
      <div>
        <span class="tips">提示信息：是否导出筛选结果项目信息？</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showExport = false">
          取 消
        </el-button>
        <el-button type="primary" @click="BatchExport">
          确 认
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      class="not-padding"
      title="审核提示"
      :visible.sync="showToExamine"
      :show-close="false"
    >
      <div>
        <span class="tips"
          >提示信息：{{
            ToExamineId == "批量" ? "筛选结果待审核" : "该"
          }}项目是否审核通过？</span
        >
      </div>
      <div slot="footer" class="dialog-footer">
        <div v-if="ToExamineId != '批量'">
          <el-button @click="showReject = true">
            不 通 过
          </el-button>
          <el-button type="primary" @click="ToExamine">
            通 过
          </el-button>
        </div>
        <div v-if="ToExamineId == '批量'">
          <el-button @click="showToExamine = false">
            取 消
          </el-button>
          <el-button type="primary" @click="ToExamine">
            确 认
          </el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      class="not-padding failed-dialog"
      title="未通过原因"
      :visible.sync="showReject"
      :show-close="false"
    >
      <div class="flex-text">
        <span>未通过说明</span>
        <el-input
          type="textarea"
          placeholder="请输入未通过原因"
          v-model="rejectText"
        >
        </el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="(showReject = false), (rejectText = '')">
          取 消
        </el-button>
        <el-button type="primary" @click="ToReject">
          确 定
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      class="not-padding tips-dialog"
      title="导入提示"
      :visible.sync="showTips"
      :show-close="false"
    >
      <div>
        <span class="tip2">{{ tipMsg }}</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showTips = false">
          确定
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      class="not-padding"
      title="删除提示"
      :visible.sync="showDel"
      :show-close="false"
    >
      <div>
        <span class="tips">提示信息：是否删除该项目？</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDel = false">
          取 消
        </el-button>
        <el-button type="primary" @click="delProject">
          确 认
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      class="not-padding tips-dialog repeat"
      title="导入提醒"
      :visible.sync="showRepeat"
      :show-close="false"
      @close="closeRepeat"
    >
      <div>
        <p class="tips">
          {{ tipMsg }}
        </p>
        <div class=" remind-box">
          <div
            class="item"
            v-for="(item, index) in repeatProjectList"
            :key="item.id"
          >
            <span class="name">
              {{ index + 1 + " 、 " + item.project_name }}
            </span>
            <div>
              <span
                :class="['btn', item.status == '覆盖' ? 'active' : '']"
                @click="changeStatus(item.id, '覆盖')"
                >覆盖</span
              >
              <span
                :class="['btn', item.status == '新增' ? 'active' : '']"
                @click="changeStatus(item.id, '新增')"
                >新增</span
              >
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="uploadRepeat">
          提交
        </el-button>
      </div>
    </el-dialog>
    <div class="file-show" v-if="openFile">
      <div class="gb" @click="closeFileShow">
        关 闭
      </div>
      <iframe v-if="FileType == 'pdf'" :src="fileSrc" frameborder="0"></iframe>
      <div v-if="FileType == 'word'" ref="word" class="word"></div>
      <div v-if="FileType == 'xlsx'" class="xlsx">
        <div class="title">文件预览 --- {{ filename }} --- Sheet1</div>
        <div class="table-box table-view" v-html="excelData">
          <!-- <el-table :data="excelData">
            <el-table-column
              v-for="(value, key, index) in excelData[1]"
              :key="index"
              :prop="key"
              :label="key"
              :show-overflow-tooltip="true"
            ></el-table-column>
          </el-table> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// //导入draggable组件
// import draggable from "vuedraggable";

import XLSX from "@/utils/xlsx.full.min.js";
import MapData from "@/utils/mapData.json";
import {
  DownloadProjectTemplate,
  UploadProjectData,
  SearchProject,
  BatchExportProject,
  BatchAudit,
  BatchDelete,
  AddOrUpdate,
} from "@/api/project_three";
export default {
  data() {
    return {
      // 重复项目
      showRepeat: false,
      checkList: [],
      repeatProjectList: [],

      // 权限列表
      permission: [],
      rejectText: "",
      showTemplate: false,
      showExport: false,
      showToExamine: false,
      showReject: false,
      showTips: false,
      tipMsg: "",
      showDel: false,
      delProjectId: null,
      ToExamineId: null,
      // 文件上传
      showImport: false,
      fileList: [],
      changeFileList: [],
      // 文件预览
      openFile: false,
      FileType: "",
      filename: "",
      excelData: "加载中...",
      // 数据列表
      projectAllIdList: [],
      projectIdList: [],
      projectList: [],
      page: 1,
      per_page: 8,
      total: 0,
      isLoading: false,
      // 筛选项
      project_name: "",
      district: "",
      province: [""],
      industry: "",
      schedule_node: "",
      is_importance: "",
      project_source: "",
      is_enter13710: "",
      schedule_condition: "",
      investment_condition: "",
      searchOptions: {
        project_name: "",
        district: "",
        province: "",
        industry: "",
        schedule_node: "",
        is_importance: "",
        project_source: "",
        is_enter13710: "",
        schedule_condition: "",
        investment_condition: "",
      },
      options_is: [
        {
          label: "全部",
          value: "",
        },
        { label: "是", value: "是" },
        { label: "否", value: "否" },
      ],
      options_status: [
        {
          label: "全部",
          value: "",
        },
        { label: "当月新增", value: "当月新增" },
        { label: "当月更新", value: "当月更新" },
        { label: "两月内未更新", value: "两月内未更新" },
      ],
      options_money: [
        {
          label: "全部",
          value: "",
        },
        { label: "0-1亿", value: "0-1亿" },
        { label: "1亿以上", value: "1亿以上" },
        { label: "10亿以上", value: "10亿以上" },
        { label: "30亿以上", value: "30亿以上" },
        { label: "50亿以上", value: "50亿以上" },
      ],
      options_district: [
        {
          label: "全部",
          value: "",
        },
        { label: "小店区", value: "小店区" },
        { label: "迎泽区", value: "迎泽区" },
        { label: "杏花岭区 ", value: "杏花岭区 " },
        { label: "尖草坪区 ", value: "尖草坪区 " },
        { label: "万柏林区 ", value: "万柏林区 " },
        { label: "晋源区", value: "晋源区" },
        { label: "古交市", value: "古交市" },
        { label: "清徐县", value: "清徐县" },
        { label: "阳曲县", value: "阳曲县" },
        { label: "娄烦县", value: "娄烦县" },
        { label: "中北高新区", value: "中北高新区" },
        { label: "清徐开发区", value: "清徐开发区" },
        { label: "西山示范区", value: "西山示范区" },
        { label: "阳曲示范区", value: "阳曲示范区" },
        { label: "太忻一体化经济区（太原区）", value: "太忻一体化经济区" },
      ],
      options_node: [
        {
          label: "全部",
          value: "",
        },
        { label: "在谈", value: "在谈" },
        { label: "拟签约", value: "拟签约" },
        { label: "已签约", value: "已签约" },
        { label: "拟开工", value: "拟开工" },
        { label: "已开工", value: "已开工" },
        // { label: "拟投产", value: "拟投产" },
        // { label: "已投产", value: "已投产" },
        { label: "暂停/终止", value: "暂停/终止" },
      ],
      options_source: [
        {
          label: "全部",
          value: "",
        },
        { label: "自行对接", value: "自行对接" },
        { label: "省市推荐", value: "省市推荐" },
        { label: "招商部门推荐", value: "招商部门推荐" },
        { label: "以商招商", value: "以商招商" },
        { label: "校友招商", value: "校友招商" },
        { label: "中介招商", value: "中介招商" },
        { label: "产业链招商", value: "产业链招商" },
        { label: "其它来源", value: "其它来源" },
      ],
      options_industry: [
        {
          label: "全部",
          value: "",
        },
        { label: "特种金属材料", value: "特种金属材料" },
        { label: "新型化工材料", value: "新型化工材料" },
        { label: "新一代电子信息制造", value: "新一代电子信息制造" },
        { label: "高端装备制造", value: "高端装备制造" },
        { label: "新能源", value: "新能源" },
        { label: "生物基新材料", value: "生物基新材料" },
        { label: "现代农业", value: "现代农业" },
        { label: "生态文旅休闲类", value: "生态文旅休闲类" },
        { label: "现代服务业", value: "现代服务业" },
        { label: "基础设施和社会民生类", value: "基础设施和社会民生类" },
        { label: "其他工业类项目", value: "其他工业类项目" },
      ],
      options_province: [
        {
          label: "全部",
          value: "",
        },
        {
          label: "全国各省市引进项目",
          value: "全国各省市引进项目",
          disabled: true,
          children: MapData,
        },
        {
          label: "重点区域引进项目",
          value: "重点区域引进项目",
          disabled: true,
          children: [
            { label: "京津冀", value: "京津冀" },
            { label: "长三角", value: "长三角" },
            { label: "粤港澳大湾区", value: "粤港澳大湾区" },
          ],
        },
        { label: "山西省域外引进项目", value: "山西省域外引进项目" },
        { label: "山西省域内引进项目", value: "太原市域外引进项目" },
      ],
    };
  },
  // components: {
  //   draggable,
  // },
  mounted() {
    this.permission = localStorage.getItem("funcList").split(",");
    console.log(this.permission);
    this.getList();
  },
  methods: {
    changeStatus(id, status) {
      this.repeatProjectList = this.repeatProjectList.map((item) => {
        if (item.id == id) {
          item.status = status;
        }
        return item;
      });
    },
    async uploadRepeat() {
      let add_project_list = [];
      let update_project_list = [];
      this.repeatProjectList.map((item) => {
        if (item.status == "新增") {
          delete item.status;
          delete item.id;
          add_project_list.push(item);
        }
        if (item.status == "覆盖") {
          delete item.status;
          delete item.id;
          update_project_list.push(item);
        }
      });
      console.log(add_project_list);
      console.log(update_project_list);
      let res = await AddOrUpdate({
        add_project_list,
        update_project_list,
      });
      if (res.code == 0) {
        this.$message.success(res.msg);
        this.repeatProjectList = [];
        this.showRepeat = false;
        this.page = 1;
        this.getList();
      } else {
        this.$message.error(res.msg);
      }
    },
    closeRepeat() {
      if (this.repeatProjectList.length != 0) {
        this.$message.warning("需将重复项目提交后，弹框才可关闭！");
        this.showRepeat = true;
      } else {
        this.showRepeat = false;
      }
      // this.repeatProjectList = [];
      // this.showRepeat = false;
      // this.page = 1;
      // this.getList();
    },
    // 批量导出
    batchExport() {
      if (this.permission.includes("108") == false) {
        this.$message.warning("暂无批量导出权限，请联系管理员！");
        return;
      }
      this.showExport = true;
    },
    importInfo() {
      if (this.permission.includes("112") == false) {
        this.$message.warning("暂无信息导入权限，请联系管理员！");
        return;
      }
      this.showImport = true;
    },
    TemplateDownload() {
      if (this.permission.includes("113") == false) {
        this.$message.warning("暂无模板下载权限，请联系管理员！");
        return;
      }
      this.showTemplate = true;
    },

    // 下载模板
    async DownloadTemplate() {
      let res = await DownloadProjectTemplate();
      window.open(res);
      this.showTemplate = false;
    }, // 上传文件
    // 上传前验证
    beforeUpload(file, fileList) {
      this.fileName = file.name;
      const isExcel =
        file.name.split(".")[file.name.split(".").length - 1] === "xlsx";
      // const isSize = file.size / 1024 / 1024 < 10;
      if (!isExcel) {
        this.$message({
          message: "只能上传xlsx文件!",
          type: "warning",
          showClose: true,
        });
      }
      return isExcel;
    },
    // 移出文件
    handleRemove(file, fileList) {
      this.fileList = fileList;
      this.changeFileList = fileList;
    },
    // 改变文件列表
    changeFile(file, fileList) {
      this.fileList = fileList;
      this.changeFileList = fileList;
    },
    // 上传到服务器
    async uploadFile(params) {
      console.log(params.file);
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, 0.7)",
      });
      console.log(this.fileList);
      let file = new FormData();
      file.append("file", params.file);
      try {
        let res = await UploadProjectData(file);
        if (res.code == 0) {
          loading.close();
          this.tipMsg = res.msg;
          if (res.list.length == 0) {
            this.showTips = true;
            setTimeout(() => {
              this.showImport = false;
            }, 200);
            this.fileList = [];
            this.changeFileList = [];
            this.page = 1;
            this.getList();
          } else {
            this.showRepeat = true;
            setTimeout(() => {
              this.showImport = false;
            }, 200);
            this.repeatProjectList = res.list.map((item, index) => {
              item.id = index;
              item.status = "新增";
              return item;
            });
            this.fileList = [];
            this.changeFileList = [];
          }
        } else {
          loading.close();
          this.fileList = [];
          this.changeFileList = [];
          this.$message.error(res.msg);
        }
      } catch {
        this.fileList = [];
        this.changeFileList = [];
        loading.close();
      }

      //   this.showTips = true;
      // setTimeout(() => {
      //   this.showImport = false;
      // }, 100);
      // return;
    },
    // 上传提交文件 发送上传请求
    submitUpload() {
      this.$refs.upload.submit();
    },
    // 文件预览
    lookFile(item) {
      console.log(item);
      if (item.name.includes("pdf")) {
        this.FileType = "pdf";
        let url = window.URL.createObjectURL(item.raw);
        this.fileSrc = url;
        this.openFile = true;
        console.log(this.fileSrc);
      } else if (item.name.includes("docx")) {
        this.FileType = "pdf";
        this.openFile = true;
        this.$nextTick(() => {
          docx.renderAsync(item.raw, this.$refs.word);
        });
      } else {
        this.FileType = "xlsx";
        this.readWorkbookFromFile(item);
        this.openFile = true;
      }
    },
    // Excel处理
    readWorkbookFromFile(data) {
      this.filename = data.name;
      let reader = new FileReader();
      reader.readAsArrayBuffer(data.raw);
      let that = this;
      reader.onload = function(readRes) {
        var workbook = XLSX.read(readRes.target.result, { type: "array" });
        var sheetNames = workbook.SheetNames;
        var worksheet = workbook.Sheets[sheetNames[0]];
        // that.excelData = XLSX.utils.sheet_to_json(worksheet);
        that.excelData = XLSX.utils
          .sheet_to_html(worksheet)
          .replace(
            '<html><head><meta charset="utf-8"/><title>SheetJS Table Export</title></head><body>',
            ""
          )
          .replace("</body></html>", "");
        // console.log(XLSX.utils.sheet_to_json(worksheet));
        // console.log(XLSX.utils.sheet_to_row_object_array(worksheet));
      };
    },
    // 关闭预览弹框
    closeFileShow() {
      this.openFile = false;
      this.fileSrc = "";
      this.excelData = "加载中...";
    },
    // 上传文件删除
    delFile(uid) {
      this.changeFileList.map((item, index) => {
        if (item.uid == uid) {
          let a = this.changeFileList.splice(index, 1);
          console.log(a);
        }
      });
    },
    // 关闭上传弹框
    closeUpload() {
      this.showImport = false;
      this.fileList = [];
      this.changeFileList = [];
    },
    // 获取列表
    async getList() {
      let res = await SearchProject({
        ...this.searchOptions,
        year: new Date().getFullYear(),
        page: this.page,
        per_page: this.per_page,
      });
      console.log(res);
      if (res.code && res.code != 0) {
        this.projectList = [];
        this.projectIdList = [];
        this.projectAllIdList = [];
        this.total = 0;
      } else {
        this.projectList = res.data.map((item, index) => {
          item.index = index + 1;
          return item;
        });
        let id_list = [];
        res.id_list.map((item) => {
          if (item != "") {
            id_list.push(item);
          }
        });
        this.projectAllIdList = res.all_id_list;
        this.projectIdList = id_list;
        this.total = res.size;
      }
    },
    // 分页
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
    // 切换筛选项
    changeOption() {
      this.searchByOption();
    },
    // 点击搜索   根据筛选项搜索
    searchByOption() {
      let province = "";
      if (this.province.length > 0) {
        if (this.province[0] == "全国各省市引进项目") {
          if (this.province[2]) {
            province = this.province[1] + "；" + this.province[2];
          } else {
            province = this.province[1];
          }
        } else if (this.province[0] == "重点区域引进项目") {
          province = this.province[1];
        } else {
          province = this.province[0];
        }
      }
      this.searchOptions = {
        project_name: this.project_name,
        district: this.district,
        province: province,
        industry: this.industry,
        schedule_node: this.schedule_node,
        is_importance: this.is_importance,
        project_source: this.project_source,
        is_enter13710: this.is_enter13710,
        schedule_condition: this.schedule_condition,
        investment_condition: this.investment_condition,
      };
      this.page = 1;
      this.getList();
    },
    // 点击清除   初始化筛选项
    clearByOption() {
      this.project_name = "";
      this.district = "";
      this.province = [""];
      this.industry = "";
      this.schedule_node = "";
      this.is_importance = "";
      this.project_source = "";
      this.is_enter13710 = "";
      this.schedule_condition = "";
      this.investment_condition = "";
      this.searchOptions = {
        project_name: "",
        district: "",
        province: "",
        industry: "",
        schedule_node: "",
        is_importance: "",
        project_source: "",
        is_enter13710: "",
        schedule_condition: "",
        investment_condition: "",
      };
      this.page = 1;
      this.getList();
    },

    // 导出筛选结果
    async BatchExport() {
      let res = await BatchExportProject({
        select_id_list: this.projectAllIdList,
      });
      if (res.code == 0) {
        window.open(res.url);
        this.showExport = false;
      } else {
        this.$message.error(res.msg);
      }
    },
    ToExamineByOne(id) {
      if (this.permission.includes("114") == false) {
        this.$message.warning("暂无审核（批量审核）权限，请联系管理员！");
        return;
      }
      this.showToExamine = true;
      this.ToExamineId = id;
    },
    // 点击批量审核
    showToExamineDialog() {
      if (this.permission.includes("114") == false) {
        this.$message.warning("暂无审核（批量审核）权限，请联系管理员！");
        return;
      }
      if (this.projectIdList.length == 0) {
        this.$message.info("当前筛选结果下，暂无待审核项目");
        return;
      }
      this.showToExamine = true;
      this.ToExamineId = "批量";
    },

    // 审核 -- 通过
    async ToExamine() {
      let res = null;
      if (this.ToExamineId == "批量") {
        //批量审核通过
        res = await BatchAudit({
          audit_flag: 1,
          audit_id_list: this.projectIdList,
          audit_message: "",
        });
      } else {
        res = await BatchAudit({
          audit_flag: 1,
          audit_id_list: [this.ToExamineId],
          audit_message: "",
        });
      }
      console.log(this.ToExamineId);
      console.log();
      if (res.code == 0) {
        this.$message.success(res.msg);
        this.showToExamine = false;
        this.getList();
      } else {
        this.$message.error(res.msg);
      }
    },
    // 审核 -- 未通过
    async ToReject() {
      let res = await BatchAudit({
        audit_flag: 2,
        audit_id_list: [this.ToExamineId],
        audit_message: this.rejectText,
      });
      if (res.code == 0) {
        this.$message.success(res.msg);
        this.showToExamine = false;
        this.showReject = false;
        this.rejectText = "";
        this.getList();
      } else {
        this.$message.error(res.msg);
      }
    },
    delProjectById(id) {
      if (this.permission.includes("116") == false) {
        this.$message.warning("暂无删除权限，请联系管理员！");
        return;
      }
      this.showDel = true;
      this.delProjectId = id;
    },
    // 删除项目
    async delProject() {
      let res = await BatchDelete({ delete_id_list: [this.delProjectId] });
      if (res.code == 0) {
        this.$message.success(res.msg);
        if (this.projectList.length == 1 && this.page > 1) {
          this.page = this.page - 1;
        }
        this.getList();
      } else {
        this.$message.success(res.msg);
      }
      // this.$message.success("删除成功");
      this.showDel = false;
    },
    // 前往项目详情且打开编辑弹框
    editArchives(id) {
      if (this.permission.includes("115") == false) {
        this.$message.warning("暂无修改权限，请联系管理员！");
        return;
      }
      localStorage.setItem("showEdit", "true");
      this.$router.push({
        name: "archives",
        params: {
          id: id,
        },
      });
    },
    // 前往项目详情
    toArchives(row, column) {
      if (column.label == "操作") {
        return;
      }
      this.$router.push({
        name: "archives",
        params: {
          id: row.id,
        },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.content-box {
  width: 100%;
  height: 100%;
  background: #fcf9fc;
}
.header-card {
  padding-left: 20px;
  width: 100%;
  height: 80px;
  line-height: 80px;
  background: #ffffff;
  box-shadow: 0px 2px 6px 0px rgba(4, 0, 0, 0.1);
  text-align: left;

  span {
    display: inline-block;
    height: 100%;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    cursor: default;
  }
  span.active {
    font-weight: bold;
    color: #446db3;
    border-bottom: 4px solid #446db3;
  }
}
.main-box {
  box-sizing: border-box;
  padding: 20px;
  height: calc(100% - 80px);
}
.select-box {
  margin: 10px 0;
  display: flex;
  flex-wrap: wrap;
  li {
    flex: 0 0 17%;
    height: 30px;
    text-align: left;
    margin-bottom: 20px;
    cursor: default;
  }
  .label {
    display: inline-block;
    width: 140px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    vertical-align: middle;
  }
  .label.w-90 {
    width: 90px;
  }
  .label.w-100 {
    width: 100px;
  }
  .label.w-80 {
    width: 80px;
  }
  .btn-group {
    flex: 0 0 14%;
    text-align: right;
  }
  .btn-s {
    display: inline-block;
    margin-right: 18px;
    width: 100px;
    height: 30px;
    background: #446db3;
    border-radius: 4px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    line-height: 30px;
    text-align: center;
  }
  .y-btn {
    display: inline-block;
    width: 80%;
    height: 30px;
    background: #f89718;
    border-radius: 4px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    line-height: 30px;
  }
  .btn-c {
    background: #ffffff;
    border: 1px solid #446db3;
    color: #446db3;
  }
  .el-input,
  .el-select,
  .el-cascader {
    display: inline-block;
    width: calc(100% - 120px);
    vertical-align: middle;
    line-height: 30px;
  }
  .long-140.el-input,
  .long-140.el-select,
  .long-140.el-cascader {
    display: inline-block;
    width: calc(100% - 140px);
    vertical-align: middle;
    line-height: 30px;
  }
  /deep/ .el-input__inner {
    height: 30px;
    background: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 5px;
  }
  /deep/ .el-input__icon {
    line-height: 30px;
  }
  /deep/ .el-select .el-input.is-focus .el-input__inner {
    border-color: #cccccc;
  }
  /deep/ .el-cascader .el-input .el-input__inner:focus,
  /deep/ .el-cascader .el-input.is-focus .el-input__inner {
    border-color: #cccccc;
  }
  /deep/ .el-icon-arrow-up:before {
    display: inline-block;
    width: 14px;
    height: 8px;
    content: "";
    background: url("~@img/portrait/icon-select-down.png") no-repeat center;
    transform: rotate(180deg);
  }

  /deep/ .el-icon-arrow-down:before {
    display: inline-block;
    width: 14px;
    height: 8px;
    content: "";
    background: url("~@img/portrait/icon-select-down.png") no-repeat center;
  }
}

.group-cz {
  margin-bottom: 30px;
  height: 38px;
  text-align: left;
  .btn {
    display: inline-block;
    width: 120px;
    height: 38px;
    line-height: 38px;
    border-radius: 4px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    cursor: default;
  }
  .m-l-30 {
    margin-left: 30px;
  }
  .m-r-30 {
    margin-right: 30px;
  }
  .f-right {
    float: right;
  }
  .y-btn {
    background: #f89718;
  }
  .r-btn {
    background: #f15847;
  }
}

.pagination-el {
  .el-pagination {
    position: absolute;
    right: 30px;
    bottom: 30px;
    text-align: right;
  }
  /deep/ .el-pager li {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
    background: #fafafa;
    box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
    border-radius: 6px;
    margin: 0 8px;
  }

  /deep/ .el-pager li.active {
    color: #fff;
    background: #446db3;
    box-shadow: 0px 0px 3px 0px rgba(0, 50, 89, 0.4);
    border-radius: 6px;
  }

  /deep/ .el-pagination .el-icon-arrow-right:before {
    content: "";
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url("~@img/atlas/icon-page-right.png") no-repeat center;
  }
  /deep/
    .el-pagination
    button:disabled.btn-next:hover
    .el-icon-arrow-right:before {
    content: "";
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url("~@img/atlas/icon-page-right.png") no-repeat center;
  }
  /deep/.el-pagination .btn-next:hover .el-icon-arrow-right:before {
    background: url("~@img/atlas/sidenav-hover2.png") no-repeat center;
  }
  /deep/ .el-pagination .el-icon-arrow-left:before {
    content: "";
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url("~@img/atlas/icon-page-left.png") no-repeat center;
  }
  /deep/
    .el-pagination
    button:disabled.btn-prev:hover
    .el-icon-arrow-left:before {
    content: "";
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url("~@img/atlas/icon-page-left.png") no-repeat center;
  }
  /deep/.el-pagination .btn-prev:hover .el-icon-arrow-left:before {
    background: url("~@img/atlas/sidenav-hover1.png") no-repeat center;
  }

  /deep/ .el-input__inner {
    height: 40px;
    color: #666;
    border-color: #fafafa;
    background: #fafafa;
    box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
    border-radius: 6px;
  }
  /deep/ .el-pagination__sizes .el-input .el-input__inner:hover {
    height: 40px;
    border-color: #fafafa;
    background: #fafafa;
    box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
    border-radius: 6px;
  }
  /deep/ .el-pagination__jump {
    height: 40px;
    line-height: 40px;
  }
  /deep/ .el-pagination__jump .el-input__inner {
    color: #ccc;
  }
  /deep/ .el-pagination__jump .el-input__inner.active {
    color: #666;
  }
  /deep/.el-pagination__jump .el-input__inner:focus {
    color: #666;
  }
  /deep/ .el-pagination .btn-next,
  /deep/ .el-pagination .btn-prev {
    padding: 0;
    height: 40px;
    width: 40px;
    box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
    border-radius: 6px;
  }
}
//// 表格样式修改
.table-el {
  height: calc(100% - 260px);
}
.table-box {
  .el-table {
    height: 100%;
  }
  /deep/.el-table--striped
    .el-table__body
    tr.el-table__row--striped
    td.el-table__cell {
    background: #f7faff;
  }

  /deep/.el-table__header .has-gutter tr th {
    height: 44px;
    background: #446db3 !important;
    color: #fff;
    border-right: 0;
  }
  /deep/.el-table tr {
    height: 44px;
    font-size: 14px;
    background-color: #fff;
  }
  /deep/.el-table .el-table__cell {
    height: 44px;
    padding: 0;

    .cell {
      height: 44px;
      line-height: 44px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  /deep/ .el-table .el-table__header-wrapper .el-table__cell.long-text .cell {
    white-space: pre-wrap;
    line-height: 22px;
  }
  /deep/ .el-table--border th {
    border-right: none;
    background: #446db3 !important;
    color: #fff;
  }
  .status-success {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #35bf69;
  }
  .status-error {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #f15847;
  }
  .status-warning {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #f89718;
  }
  .btn-def {
    display: inline-block;
    width: 50px;
    height: 24px;
    background: #f89718;
    border-radius: 4px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    line-height: 24px;
    vertical-align: middle;
  }

  .btn-del {
    background: #f15847;
  }
}

/deep/ .el-dialog--center .el-dialog__body {
  padding: 10px 0;
}

/deep/ .el-dialog {
  padding: 0 88px;
  top: 50%;
  margin-top: -150px !important;
  height: 300px;
  background: #ffffff;
  box-shadow: 0px 5px 50px 0px rgba(186, 186, 186, 0.5);
  border-radius: 20px;
  .el-dialog__header {
    padding: 0;
    height: 80px;
    line-height: 80px;
    border-bottom: 1px dashed #dddddd;

    .el-dialog__title {
      display: block;
      line-height: 80px;
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #446db3;
    }
  }
  .el-dialog__footer {
    position: absolute;
    bottom: 40px;
    left: 50%;
    margin-left: -258px;
    padding: 0;
    .el-button {
      padding: 0;
      width: 248px;
      height: 48px;
      border: 2px solid #446db3;
      border-radius: 10px;
      font-size: 26px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #446db3;
    }
    .el-button--primary {
      padding: 0;
      margin-left: 20px;
      color: #fff;
      background: #446db3;
      box-shadow: 0px 2px 5px 0px rgba(68, 109, 179, 0.5);
    }
  }
  // .dialog-footer {
  //   width: 248px;
  //   margin-left: 114px;
  // }
  .d-content {
    width: 420px;
    margin: 0 auto;
    .label-name {
      margin: 10px 0 6px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #666666;
      line-height: 34px;
    }
    .label-input {
      padding-left: 12px;
      width: 420px;
      height: 32px;
      line-height: 32px;
      background: #f7f7f7;
      border: 1px solid #cccccc;
      border-radius: 5px;
    }
  }
}
.import /deep/ .el-dialog {
  margin-top: -182px !important;
  height: 364px;
}
.failed-dialog /deep/ .el-dialog {
  margin-top: -188px !important;
  height: 376px;
}
/deep/ .upload {
  text-align: left;
  .s-title {
    margin-bottom: 10px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
  }
}

.files {
  /deep/.el-upload__tip {
    margin-left: 16px;
    display: inline-block;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
  }
  .upload-demo {
    min-height: 140px;
  }
  /deep/ .el-button {
    margin-top: 20px;
    padding: 0;
  }
  /deep/ .el-button--small {
    margin: 0;
    padding: 0;
    width: 133px;
    height: 38px;
    line-height: 38px;
    background: #5889dc;
    border-radius: 4px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    vertical-align: middle;
    img {
      margin-right: 5px;
      position: relative;
      left: 0;
      top: 1px;
    }
  }
}
/deep/ .el-dialog__body {
  padding: 30px 0px 30px 200px;
}
/deep/ .el-upload-list__item-name {
  text-align: left;
}
/deep/ .not-padding .el-dialog__body {
  padding: 48px 0;
  .tips {
    width: 100%;
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }
  .tip2 {
    font-size: 22px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }

  .remind-box {
    margin: 30px 0;
    box-sizing: border-box;
    padding: 18px 60px 32px 60px;
    // width: 645px;
    height: 360px;
    background: #f7f7f7;
    border-radius: 8px;

    text-align: left;
    scrollbar-color: #ccc #eee;
    scrollbar-width: 6px;
    scrollbar-width: thin;
    overflow-x: hidden;
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: linear-gradient(0deg, #ccc, #ccc);
    }
    &::-webkit-scrollbar-track {
      background: #eee;
      border-radius: 10px;
    }
    .item {
      min-height: 44px;
      line-height: 36px;
      display: flex;
      justify-content: space-between;
      div {
        padding-top: 4px;
        flex: 0 0 130px;
      }
    }
    span.name {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      line-height: 30px;
      margin-right: 10px;
    }
    span.btn {
      float: right;
      margin-right: 10px;
      // display: inline-block;
      width: 50px;
      height: 24px;
      background: #e0e0e0;
      border-radius: 4px;
      line-height: 30px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #999999;
      line-height: 24px;
      text-align: center;
      cursor: default;
    }
    span.btn.active {
      background: #446db3;
      font-weight: bold;
      color: #ffffff;
    }
  }
}

.file-list {
  height: 60px;
  line-height: 60px;
  cursor: default;
  text-align: left;
  span,
  img {
    vertical-align: middle;
  }
  span {
    font-family: Microsoft YaHei;
    font-weight: 400;
  }
  .name {
    display: inline-block;
    max-width: 260px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 14px;
    font-size: 16px;
    color: #666666;
  }
  .s {
    margin: 0 10px 0 6px;
    font-size: 14px;
    color: #999999;
  }
  .d {
    margin: 0 0 0 6px;
    font-size: 14px;
    color: #999999;
  }
}
.file-show {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
  z-index: 999999;
  .gb {
    position: absolute;
    right: 50px;
    top: 30px;
    font-size: 18px;
    display: inline-block;
    width: 100px;
    height: 40px;
    line-height: 40px;
    font-weight: 400;
    background: #446db3;
    color: #ffffff;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
  }
  .word,
  .xlsx,
  iframe {
    width: 100vw;
    height: 100vh;
    overflow: auto;
  }
  .xlsx {
    .title {
      height: 100px;
      line-height: 100px;
      font-size: 24px;
    }
    /deep/ .el-table {
      width: 100% !important;
    }
  }
}

/deep/ .tips-dialog .el-dialog .el-dialog__footer .el-button--primary {
  margin-left: 134px;
}
.flex-text {
  display: flex;

  padding: 0 120px;
  span {
    flex: 0 0 160px;
    padding-top: 12px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }
  /deep/ .el-textarea,
  /deep/ .el-textarea__inner {
    width: 398px;
    height: 128px;
    background: #f7f7f7;
    border-radius: 8px;
    resize: none;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666;
  }
  /deep/ .el-textarea__inner,
  /deep/ .el-textarea__inner:focus {
    border-color: transparent;
  }
}
/deep/ textarea::-webkit-input-placeholder {
  -webkit-text-fill-color: #999999;
}
/deep/ textarea::-moz-input-placeholder {
  -webkit-text-fill-color: #999999;
}
/deep/ textarea::-ms-input-placeholder {
  -webkit-text-fill-color: #999999;
}
.el-table {
  max-width: calc(100vw - 370px);
}
/deep/ .repeat .el-dialog {
  margin-top: -363px !important;
  min-height: 726px;
}

/deep/ .repeat .el-dialog .el-dialog__footer {
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  padding: 0 88px;
  bottom: 40px;
  left: 50%;
  margin-left: -50%;
  padding: 0;
}
/deep/ .repeat .dialog-footer {
  display: flex;
  justify-content: space-evenly;
}
/deep/.repeat.tips-dialog .el-dialog .el-dialog__footer .el-button--primary {
  margin-left: 0;
}
/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1512 * 790
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
  .group-cz {
    margin-bottom: 20px;
  }
  .select-box .btn-s {
    width: 70px;
  }
  // .select-box .y-btn {
  //   width: 180px;
  // }
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
  .select-box .btn-s {
    width: 64px;
  }
  .el-table {
    height: 424px !important;
    height: calc(100vh - 466px) !important;
  }
  .select-box li[data-v-dfb629be] {
    margin-bottom: 15px;
  }
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
  .select-box .btn-s {
    margin-right: 10px;
  }
  // .select-box .y-btn {
  //   width: 160px;
  // }
}
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  .el-table {
    max-width: calc(100vw - 310px);
  }
  .left {
    flex: 0 0 240px;
  }
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  .main-box {
    width: 1080px;
    height: 700px;
    transform: scale(0.83);
    transform-origin: 0 0;
  }
  .el-cascader-node__label {
    font-size: 12px;
  }
  .el-table {
    max-width: calc(1080px);
    height: 408px !important;
  }
  .el-select-dropdown__item {
    font-size: 12px;
  }
  .header-card[data-v-12f3a861] {
    height: 60px;
    line-height: 60px;
  }
  .header-card span {
    font-size: 18px;
  }
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
  .main-box {
    width: 1080px;
    height: 700px;
    transform: scale(0.7);
    transform-origin: 0 0;
  }
}
/deep/ .el-tooltip__popper {
  max-width: 400px;
}
.el-tooltip__popper {
  max-width: 400px;
}
/deep/ .el-table .el-table__body-wrapper .el-table__cell .cell,
/deep/ .el-table .el-table__fixed-body-wrapper .el-table__cell .cell {
  cursor: pointer !important;
}
</style>

<style>
/* .el-cascader-menu {
  height: 144px;
} */
.el-tooltip__popper {
  max-width: 400px;
}
.table-view table {
  border: 1px solid #ccc;
  border-collapse: collapse;
}
.table-view table tr:first-of-type {
  background: #446db3;
  color: #fff;
}
.table-view table td {
  padding: 10px;
  min-width: 160px;
  border: 1px solid #ccc;
}
</style>
